<template>
	<view class="detailBox">
		<u-navbar :bgColor="bgColor" :title="title" leftIconColor="#ffffff" :autoBack="true" :placeholder="true"
			:titleStyle="titleStyle" @leftClick="leftClick">
		</u-navbar>

		<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay"
			style="width: 750rpx; height: 600rpx;">
			<swiper-item v-for="(item,index) in houseDetailData.images" :key="index" @click="handleBigimg(item)">
				<image class="contentImg" mode="aspectFill" :src="item" style="width: 750rpx; height: 600rpx;"></image>
			</swiper-item>

			<swiper-item v-if="houseDetailData.video != null || houseDetailData.video_file">
				<video id="video1"
					:src="houseDetailData.is_video =='1' ?  houseDetailData.video : houseDetailData.video_file" controls
					style="width: 750rpx; height: 600rpx;"
					@click="handleVideoBIG(houseDetailData.is_video =='1' ? houseDetailData.video : houseDetailData.video_file)"></video>
			</swiper-item>
		</swiper>
		<view class="housingDetail">
			<view class="" style="display: flex;align-items: center;">
				<view v-if="houseDetailData.id" class="id">
					{{houseDetailData.house_number}}房
				</view>
				<view class="title">
					{{houseDetailData.name}}
				</view>

			</view>

			<view v-if="houseDetailData.metro" class="desc">
				距<text></text>{{houseDetailData.metro1 == null ? "" : houseDetailData.metro1}}{{houseDetailData.metro == null ? "" : houseDetailData.metro}}{{houseDetailData.remark==null ? '' : houseDetailData.remark+'米'}}
			</view>

			<view class="priceandcollect">
				<view v-if="houseDetailData.price !='0.00'" class="price">
					{{houseDetailData.price}}元/月
				</view>
				<view v-else class="price">
					致电询价
				</view>
				<view class="collect">
					{{houseDetailData.collect}}收藏
				</view>
			</view>


			<view class="" style="display: flex;justify-content: space-between;align-items: center;">
				<view class="advantage">
					<view class="advantageitem" v-for="(item,index) in houseDetailData.advantage" :key="item.id">
						{{item.name}}
					</view>
				</view>
				<view v-if="houseDetailData.id" class="fangyuanma">
					<view class="text">
						房源码
					</view>
					<view class="">
						{{houseDetailData.id}}
					</view>
				</view>
			</view>


		</view>


		<view class="basicInformation">
			<view class="title">
				基本信息
			</view>
			<view class="informationBox">
				<view class="informationItem" v-for="(item,index) in houseDetailData.information">
					{{item}}
				</view>
			</view>



			<view v-if="houseDetailData.detail" class="basicBox">
				<rich-text type="text" :nodes="houseDetailData.detail"></rich-text>
			</view>

		</view>


		<view class="facilityBox">
			<view class="title">
				配套设施
			</view>
			<view class="facilityitemBox">
				<view class="facilityitem" v-for="(item,index) in houseDetailData.supporting_facilities" :key="item.id">
					<image class="facilityimg" :src="item.image"
						style="width: 76rpx; height: 76rpx; border-radius: 76rpx;">
					</image>
					<view class="desc">
						{{item.name}}
					</view>
				</view>

			</view>

		</view>


		<view v-if="houseDetailData.content" class="otherBox">

			<view class="title">
				房屋其他信息
			</view>
			<view class="otherDesc">
				<rich-text type="text" :nodes="houseDetailData.content"></rich-text>
			</view>
		</view>
		<view class="position">
			<view class="title" style="display: flex;justify-content: space-between;">
				<view class="">
					位置及周边
				</view>

				<view v-if="loginShow" class="">
					<view v-if="mineData.is_business == 1 " class="" @click="handleMap"
						style="padding: 5rpx 20rpx;border-radius: 20rpx;background-color: #F8AD22;color: #ffffff;">
						去这里
					</view>

					<view v-else class="" @click="handleMap">
						<view v-if="houseDetailData.is_status != 0 || mineData.level_day>0 " class="">
							<view v-if="houseDetailData.status == 1" class=""
								style="padding: 5rpx 20rpx;border-radius: 20rpx;background-color: #F8AD22;color: #ffffff;">
								去这里
							</view>
						</view>
					</view>
				</view>



			</view>

			<view v-if="loginShow" class="">

				<!-- 开通会员并且是房东直连 或者是业务员可以看到全部地址  购买会员但是房源是自主派单是不可以看到的-->
				<view v-if="mineData.level_day > 0 || mineData.is_business == 1" class="positiondesc">
					<view v-if="houseDetailData.status==1 || mineData.is_business == 1" class="">
						{{houseDetailData.address}}
						{{houseDetailData.community.town=="寺儿堡镇"?"马田街道":houseDetailData.community.town}}
						{{houseDetailData.community.village}}
						{{houseDetailData.building_text}}
					</view>
					<view v-else class="">
						{{houseDetailData.address}}
						{{houseDetailData.community.town=="寺儿堡镇"?"马田街道":houseDetailData.community.town}}
						{{houseDetailData.community.village}}xxxxx
					</view>
					<!-- 门牌号{{houseDetailData.house_number}} -->
				</view>
				<!-- 未开通会员 -->
				<view v-else class="">
					<view v-if="houseDetailData.is_status == 0 || houseDetailData.status==0" class="positiondesc">
						{{houseDetailData.address}}{{houseDetailData.community.town=="寺儿堡镇"?"马田街道":houseDetailData.community.town}}
						{{houseDetailData.community.village}}xxxxx
					</view>
					<view v-else class="positiondesc">
						{{houseDetailData.address}}{{houseDetailData.community.town}}
						{{houseDetailData.community.village}}{{houseDetailData.building_text}}
						<!-- 门牌号{{houseDetailData.house_number}} -->
					</view>
				</view>
			</view>


			<view v-else class="">
				<view class="positiondesc">
					{{houseDetailData.address}}{{houseDetailData.community.town=="寺儿堡镇"?"马田街道":houseDetailData.community.town}}
					{{houseDetailData.community.village}}xxxxx
				</view>
			</view>

			<view class="positionBox">
				<!-- 开通会员 -->
				<view v-if="mineData.level_day>0" class="">
					<map style="width: 690rpx; height: 180px;" :latitude="latitude" :longitude="longitude"
						:markers="covers" :scale="16" :enable-zoom="false">
					</map>
				</view>

				<!-- 未开通会员 -->
				<view v-else class="">
					<map style="width: 690rpx; height: 180px;" :latitude="latitude" :longitude="longitude"
						:markers="covers" :scale="16" :enable-zoom="false">
					</map>
					<!-- houseDetailData.is_status == 1 && -->
					<!-- <view v-if="houseDetailData.is_status == 0 " class="overlay">
						<image class="" src="@/static/image/suobgimg.png" style="width:100%; height: 100%;"
							@click="handleFufeiTankuang"></image>
					</view> -->
				</view>

			</view>
		</view>

		<!-- status : 0  付费    status : 1 联系看房 -->
		<!-- is_status：0  未联系或未付费   is_status：1  已联系或已付费  -->


		<view class="instructions">
			<view class="title">
				入住须知
			</view>

			<view v-if="houseDetailData.notice!=null" class="instructionsdesc">
				{{houseDetailData.notice}}
			</view>

			<view v-else class="instructionsdesc">
				<rich-text type="text" :nodes="RUZHU"></rich-text>
			</view>

		</view>

		<view class="instructions">
			<view class="title">
				平台保障
			</view>

			<view v-if="houseDetailData.guarantee!=null" class="instructionsdesc">
				{{houseDetailData.guarantee}}
			</view>

			<view v-else class="instructionsdesc">
				<rich-text type="text" :nodes="BAOZHANG"></rich-text>
			</view>

		</view>

		<view class="" style="height: 190rpx;"></view>


		<view v-if="loginShow" class="bottomContent">

			<view class="itemBox">
				<view v-if="houseDetailData.is_view == 0" class="item" @click="handleAvailable">
					<image class="" src="http://youcaius.top/uploads/image/bendong.png"
						style="width: 40rpx; height: 40rpx;" />
					<view class="text">
						本栋房源
					</view>
				</view>
				<view class="item" style="position: relative;">
					<image class="" src="http://youcaius.top/uploads/image/share.png"
						style="width: 40rpx; height: 40rpx;" />

					<button open-type="share" class="shareBtn"></button>
					<view class="text">
						分享
					</view>

				</view>
				<view class="item" @click="handleColler">
					<image v-if="houseDetailData.is_collect == 1" class=""
						src="http://youcaius.top/uploads/image/collered.png" style="width: 40rpx; height: 40rpx;" />
					<image v-else class="" src="http://youcaius.top/uploads/image/coller.png"
						style="width: 40rpx; height: 40rpx;" />
					<view class="text">
						收藏
					</view>
				</view>
			</view>

			<!-- status : 0  付费    status : 1 联系看房 -->
			<!-- is_status：0  未联系或未付费   is_status：1  已联系或已付费  -->


			<!-- status : 1  付费（房东直连）    status : 0 联系看房（自主派单） -->
			<!-- is_status：0  未联系或未付费   is_status：1  已联系或已付费  -->

			<!-- is_business : 0 用户    is_business : 1 业务员 -->

			<!-- is_business == 0 是用户  才做以下区分  业务员不需要下面的操作 -->



			<!-- 用户 -->
			<view v-if="mineData.is_business == 0" class="">
				<!-- 开通会员 -->
				<view v-if="mineData.level_day>0" class="">
					<view v-if="houseDetailData.status == 0 " class="btns" @click="handleConnection">
						联系看房
					</view>
					<view v-if="houseDetailData.status == 1" class="btns" @click="handlePhone">
						联系看房
					</view>
				</view>

				<!-- 未开通会员 -->
				<view v-else class="">
					<!-- 转租 -->
					<view v-if="houseDetailData.category_id == 4" class="">
						<view v-if="houseDetailData.status == 1 && houseDetailData.is_status == 0" class="btns"
							@click="handleFufeiTankuang">
							联系看房
						</view>
					</view>

					<view v-if="houseDetailData.status == 0 && houseDetailData.is_status == 0" class="btns"
						@click="handleConnection">
						联系看房
					</view>
					<view v-if="houseDetailData.status == 0 && houseDetailData.is_status == 1" class="btns"
						style="background-color: #ffffff;">
					</view>

					<!-- && houseDetailData.category_id != 4 -->
					<view
						v-if="houseDetailData.status == 1 && houseDetailData.is_status == 0 && houseDetailData.category_id != 4"
						class="btns" @click="handleFufeiTankuang">
						联系房主{{houseDetailData.show_price}}元
					</view>

					<view v-if="houseDetailData.status == 1 && houseDetailData.is_status == 1" class="btns"
						@click="handlePhone">
						联系看房
					</view>

				</view>



			</view>


			<!-- 业务员 -->
			<view v-else class="">
				<view class="btns" @click="handlePhonesss">
					联系看房
				</view>
			</view>


		</view>




		<button v-else :key="index" class="box_phone_yes" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
			<view class="bottomContent">
				<view class="itemBox">
					<view v-if="houseDetailData.is_view == 0" class="item">
						<image class="" src="http://youcaius.top/uploads/image/bendong.png"
							style="width: 40rpx; height: 40rpx;" />
						<view class="text">
							本栋房源
						</view>
					</view>
					<view class="item" style="position: relative;">
						<image class="" src="http://youcaius.top/uploads/image/share.png"
							style="width: 40rpx; height: 40rpx;" />

						<button open-type="share" class="shareBtn"></button>
						<view class="text">
							分享
						</view>
					</view>
					<view class="item">
						<image v-if="houseDetailData.is_collect == 1" class=""
							src="http://youcaius.top/uploads/image/collered.png" style="width: 40rpx; height: 40rpx;" />
						<image v-else class="" src="http://youcaius.top/uploads/image/coller.png"
							style="width: 40rpx; height: 40rpx;" />
						<view class="text">
							收藏
						</view>
					</view>
				</view>

				<!-- 用户 -->
				<view class="">
					<!-- 开通会员 -->
					<view class="">
						<view class="btns">
							联系看房
						</view>
					</view>
				</view>
			</view>



		</button>







		<u-popup :show="show" class="imgpop" mode="center" width="100%" height="100%" overlayOpacity="1"
			:closeOnClickOverlay="true">
			<view>
				<image class="" :src="showImg" mode="widthFix" style="width: 730rpx;" />

				<view class="btnBox">
					<view class="btn" @click="downLoadImg">
						保存照片
					</view>
					<view class="btn" @click="show = false">
						关闭照片
					</view>
				</view>
			</view>
		</u-popup>

		<u-popup :show="videoshow" class="imgpop" mode="center" width="100%" height="100%" overlayOpacity="1"
			:closeOnClickOverlay="true">
			<view style="position: relative;">
				<video id="video2" v-if="videoUrl !='' " :src="videoUrl" style="width: 730rpx; height:  730rpx;"
					objectFit="contain" controls="true" autoplay="true"></video>
				<view class="" style="position: absolute;top: 60%;right: 10rpx; font-size: 50rpx;font-weight: 700;">
					<image class="" src="../../static/image/logos.png"
						style="width: 120rpx;height: 60rpx;z-index: 999;" />
				</view>
				<view class="btnBox">
					<view class="btn" @click="downLoadvideo">
						保存视频
					</view>
					<view class="btn" @click="closeViseo">
						关闭视频
					</view>
				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	var graceRichText = require("../../static/richText.js");
	import {
		houseDetailst,
		details,
		houseCollect,
		payHouse,
		config,
		downloadWatermark,
		mineData,
		calling,
		obtainMobile
	} from "@/api/api.js"
	export default {
		data() {
			return {
				title: "详情页",
				bgColor: "#F8AD22",
				houseDetailData: {},
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				pageId: "",
				covers: [{
					latitude: 0,
					longitude: 0,
					iconPath: '/static/image/collered.png',
					width: 16,
					height: 16
				}],
				custom_button: {
					'transform': 'translate(0px,-100rpx) !important',
					'backgroundColor': 'transparent !important',
					'border': 'none !important',
				},
				titleStyle: {
					'color': '#ffffff !important',
				},
				zhengzeAddress: "",
				SCFlag: false,
				RUZHU: "",
				BAOZHANG: "",
				mineData: {},
				downloadImgurl: "",
				show: false,
				showImg: "",
				videoshow: false,
				videoUrl: "",
				videoContext1: null,
				videoContext2: null,
				address: "",
				latitude: null,
				longitude: null,
				tabFlag: true,
				loginShow: true,
			}
		},
		onReady() {
			this.videoContext1 = uni.createVideoContext('video1'); // video1 是第一个视频的 id
			this.videoContext2 = uni.createVideoContext('video2'); // video2 是第二个视频的 id
		},
		onShow() {
			if (uni.getStorageSync("token")) {
				this.loginShow = true
				this.getDetail()
				this.getHouseDetailst()
				this.getMineData()
			} else {
				this.loginShow = false
				this.getDetail()
			}
		},
		onLoad(options) {
			// if (!uni.getStorageSync("token")) {
			// 	uni.showToast({
			// 		title: '登录后，即可查看房源！',
			// 		icon: "none",
			// 		duration: 2000
			// 	});
			// 	uni.reLaunch({
			// 		url: "/pages/home/index"
			// 	})
			// } else {
			if (options.shareId) {
				this.pageId = options.shareId
			} else {
				this.pageId = options.id
				this.tabFlag = false
			}
			let handleData = {
				flag: false,
				type: 0,
				handleId: this.pageId
			}
			this.getConfig()
			uni.setStorageSync("handleData", handleData)
			// }
		},

		onUnload() {
			if (!this.SCFlag) {
				console.log("改变了")
				let handleData = {
					flag: false,
					type: 0,
					handleId: this.pageId
				}
				uni.setStorageSync("handleData", handleData)
			}

		},

		onShareAppMessage(e) {
			return {
				title: this.houseDetailData.name,
				path: `pages/home/homedetail?shareId=${this.pageId}`
				//此处传递share=true的目的是：可以在onload中接收到，从而判断是否是通过分享进来的。如果用不到，也可以不传。
			}
		},


		methods: {
			leftClick() {
				if (this.tabFlag) {
					uni.switchTab({
						url: "/pages/home/index"
					})
				}
			},
			async getHouseDetailst() {
				let res = await houseDetailst({
					id: this.pageId
				})
				if (res.code == 1000) {
					this.houseDetailData = res.data
					this.houseDetailData.detail = res.data.detail != null ? graceRichText.format(res.data.detail) : ""
					this.houseDetailData.content = res.data.content != null ? graceRichText.format(res.data.content) :
						""
					if (this.houseDetailData.community.town == '寺儿堡镇') {
						this.houseDetailData.community.town = '马田街道'
					}
					if (this.houseDetailData.community.town == '莘塍街道') {
						this.houseDetailData.community.town = '公明街道'
					}

					this.address = res.data.address
					this.BdMapToTxMap(res.data.latitude, res.data.longitude)

				}
				console.log("房子详情", res)
			},
			async getDetail() {
				let res = await details({
					id: this.pageId
				})
				if (res.code == 1000) {
					this.houseDetailData = res.data
					this.houseDetailData.detail = res.data.detail != null ? graceRichText.format(res.data.detail) : ""
					this.houseDetailData.content = res.data.content != null ? graceRichText.format(res.data.content) :
						""
					if (this.houseDetailData.community.town == '寺儿堡镇') {
						this.houseDetailData.community.town = '马田街道'
					}
					if (this.houseDetailData.community.town == '莘塍街道') {
						this.houseDetailData.community.town = '公明街道'
					}

					this.address = res.data.address
					this.BdMapToTxMap(res.data.latitude, res.data.longitude)
				}
			},

			BdMapToTxMap(lat1, lon1) {
				let lat = parseFloat(lat1);
				let lon = parseFloat(lon1);
				let tx_lat;
				let tx_lon;
				let x_pi = (3.14159265358979324 * 3000.0) / 180.0;
				let x = lon - 0.0065;
				let y = lat - 0.006;
				let z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * x_pi);
				let theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * x_pi);
				tx_lon = z * Math.cos(theta);
				tx_lat = z * Math.sin(theta);
				this.covers[0].latitude = tx_lat
				this.covers[0].longitude = tx_lon
				this.latitude = tx_lat
				this.longitude = tx_lon
				// console.log("lat", lat1, "lon", lon1)
				// console.log("lat", tx_lat, "lon", tx_lon)
				// console.log("lat", this.latitude, "lon", this.longitude,'88888555222')
			},
			handleMap() {
				// console.log("33333333", this.covers[0].latitude, this.covers[0].longitude)
				uni.openLocation({
					latitude: this.covers[0].latitude,
					longitude: this.covers[0].longitude,
					success: function() {
						console.log('success');
					}
				});
			},
			handleVideoBIG(url) {
				this.videoUrl = url
				this.videoContext1.pause()
				this.videoshow = true
			},
			closeViseo() {
				this.videoContext2.pause()
				this.videoshow = false
			},
			downLoadvideo() {
				let that = this
				uni.getSetting({
					success(res) {
						console.log("11111111111")
						// console.log("用户权限", res.authSetting)
						if (res.authSetting["scope.writePhotosAlbum"] == true) {
							console.log("22222222")
							that.handledownLoadVideo()
						} else {
							console.log("333333333")
							uni.authorize({
								scope: 'scope.writePhotosAlbum',
								success() {
									// 用户授权成功，可以下载视频
									that.handledownLoadVideo()
								},
								fail() {
									// 用户拒绝授权，可以给出提示或进行其他操作
									uni.showToast({
										title: '您未同意授权保存本地，咱不能保存视频！',
										icon: "none",
										duration: 2000
									});
								}
							});
						}
					}
				})
			},

			handledownLoadVideo() {
				console.log("444444444444")
				let that = this
				uni.showLoading({
					title: "正在保存",
					mask: true
				});
				uni.downloadFile({
					url: that.videoUrl,
					timeout: 300000,
					success(res) {
						console.log("视频 下载成功", res)
						if (res.statusCode === 200) {
							uni.saveVideoToPhotosAlbum({
								filePath: res.tempFilePath,
								// filePath: filePath,
								success(res) {
									uni.hideLoading()
									console.log("555555555")
									// console.log(res, 'success')
									uni.showToast({
										title: '保存成功！',
										icon: "none",
										duration: 1000
									});
								},
								fail(error) {
									// console.log(error, 'error')
								}
							})
						}
					},
					fail(res) {
						console.log("==============", res)
						uni.hideLoading()
						uni.showModal({
							content: '下载超时'
						})

					}
				})
			},



			downLoadImg() {
				let that = this
				uni.getSetting({
					success(res) {
						console.log("用户权限", res.authSetting["scope.writePhotosAlbum"])
						if (res.authSetting["scope.writePhotosAlbum"]) {
							that.handleDownImg()
						} else {

							uni.authorize({
								scope: 'scope.writePhotosAlbum',
								success() {
									// 用户授权成功，可以下载视频
									that.handleDownImg()
								},
								fail() {
									// 用户拒绝授权，可以给出提示或进行其他操作
									uni.showToast({
										title: '您未同意授权保存本地，咱不能保存图片！',
										icon: "none",
										duration: 2000
									});
								}
							});
						}
					}
				})
			},

			handleDownImg() {
				uni.downloadFile({
					url: this.downloadImgurl,
					success(res) {
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success(res) {
								uni.showToast({
									title: '保存成功！',
									icon: "none",
									duration: 1000
								});
								console.log('保存成功')
							},
							fail(res) {
								console.log(res)
							}
						})
					},
					fail(res) {
						console.log(res)
						// uni.showModal({
						// 	content: "保存错误"+ res
						// })
					}
				})
			},


			async getMineData() {
				let res = await mineData()
				console.log("个人信息", res)
				this.mineData = res.data
				// this.mineData.is_business = 1
			},

			async handleBigimg(url) {
				// console.log("this.images",this.images)
				uni.previewImage({
					urls: this.houseDetailData.images, // 图片的链接列表
					current: 0, // 当前显示图片的链接索引
				});
				return
				this.show = true
				this.showImg = url
				let res = await downloadWatermark({
					image: url,
					type: "png"
				})
				this.downloadImgurl = res.data
			},

			async getConfig() {
				let res = await config()
				if (res.code == 1000) {
					console.log("config", res)
					this.RUZHU = graceRichText.format(res.data[3].value)
					this.BAOZHANG = graceRichText.format(res.data[4].value)
				}
			},

			handlePhone() {
				uni.makePhoneCall({
					phoneNumber: this.houseDetailData.mobile,
					success() {
						console.log("拨打成功")
					},
					fail() {
						console.log("取消")
					},
				});
			},

			handlePhonesss() {
				let that = this
				uni.makePhoneCall({
					phoneNumber: that.houseDetailData.mobile,
					success: async function() {
						console.log("拨打成功")
						let res = await calling({
							house_id: that.pageId
						})
					},
					fail() {
						console.log("取消")
					},
				});
			},






			async handleColler() {
				let flag = this.houseDetailData.is_collect
				console.log("flag", flag)
				let res = await houseCollect({
					id: this.houseDetailData.id
				})
				if (res.code == 1000) {
					this.SCFlag = !this.SCFlag
					this.getHouseDetailst(this.pageId)
					if (flag == 0) {
						uni.showToast({
							title: '收藏成功！',
							icon: "none",
							duration: 1000
						});
						let handleData = {
							flag: true,
							type: 1,
							handleId: this.pageId
						}
						uni.setStorageSync("handleData", handleData)
					} else {
						uni.showToast({
							title: '已取消收藏！',
							icon: "none",
							duration: 1000
						});
						let handleData = {
							flag: true,
							type: 0,
							handleId: this.pageId
						}
						uni.setStorageSync("handleData", handleData)
					}


				} else {

				}
			},

			handleAvailable() {
				uni.navigateTo({
					url: `../housingresource/available?id=${this.houseDetailData.building_id}`
				})
			},
			handleConnection() {

				uni.navigateTo({
					url: `../housingresource/connection?id=${this.houseDetailData.id}`
				})

			},

			handleFufeiTankuang() {
				if (this.houseDetailData.status == 0) {
					this.handleConnection()
					return
				}
				let that = this
				uni.showModal({
					title: '确认要查看吗？',
					content: `查看房源详细地址和联系方式 需要支付¥${this.houseDetailData.show_price}`,
					cancelText: "再想想",
					confirmText: "去支付",
					confirmColor: "#2375CA",
					success: async function(res) {
						if (res.confirm) {
							// console.log('用户点击确定');
							let res = await payHouse({
								id: that.houseDetailData.id
							})
							if (res.code == 1000) {

								uni.requestPayment({
									provider: 'wxpay',
									appId: res.data.appId,
									timeStamp: res.data.timeStamp,
									nonceStr: res.data.nonceStr,
									package: res.data.package,
									signType: res.data.signType,
									paySign: res.data.paySign,
									success(res) {
										console.log("支付成功、、、、、、、、、、、、、、、、")
										that.getHouseDetailst(that.pageId)
									},
									fail(e) {}
								})
							} else if (res.code == 5001) {
								uni.showToast({
									title: '支付成功！',
									icon: "none",
									duration: 1000
								});
								that.getHouseDetailst(that.pageId)
							} else {
								uni.showToast({
									title: res.message,
									icon: "none",
									duration: 1000
								});
							}
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},


			async getPhoneNumber(e) {
				let that = this
				uni.login({
					provider: 'weixin',
					success: async (loginRes) => {
						console.log("微信获取code码", loginRes);
						that.logincode = loginRes.code
						let data = {
							code: that.logincode,
							encryptedData: e.detail.encryptedData,
							iv: e.detail.iv
						}
						let res = await obtainMobile(data)
						if (res.code == 1000) {
							uni.setStorageSync("token", res.data.token)
							uni.showToast({
								title: res.message,
								icon: "success",
								duration: 1000
							});
							this.getDetail()
							this.getHouseDetailst()
							this.loginShow = true
						} else {
							uni.showToast({
								title: res.message,
								icon: "success",
								duration: 1000
							});
						}
					}
				})

			},

		}
	}
</script>

<style scoped lang="scss">
	.fangyuanma {
		font-size: 20rpx;
		width: 80rpx;
		height: 80rpx;
		border-radius: 80rpx;
		background-color: #F8AD22;
		color: #ffffff;
		text-align: center;
		padding-top: 8rpx;
		box-sizing: border-box;
		font-weight: 400;
	}

	.btnBox {
		width: 80%;
		display: flex;
		justify-content: space-between;
		margin: 30rpx auto;

		.btn {
			width: 200rpx;
			height: 80rpx;
			border: #666666 1rpx solid;
			border-radius: 50rpx;
			color: #ffffff;
			text-align: center;
			line-height: 80rpx;
		}
	}

	::v-deep .u-popup__content {
		background-color: transparent !important;
	}

	.shareBtn {
		background-color: transparent;
		height: 80rpx;
		position: absolute;
		top: 0rpx;
		border: none !important;
		outline: none !important;
	}

	.shareBtn::after {
		border: none;
	}

	.detailBox {
		.title {
			font-size: 28rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #333333;
			line-height: 33rpx;
		}

		.housingDetail {
			width: 750rpx;
			height: 320rpx;
			background: #FFFFFF;
			padding: 30rpx;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.desccode {
				padding: 10rpx 25rpx;
				font-size: 25rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 600;
				color: #F8AD22;
				line-height: 26rpx;
				border-radius: 10rpx;
				margin-right: 10rpx;
				border: 1rpx solid #F8AD22;
				margin-left: 15rpx;
			}

			.id {
				padding: 10rpx 25rpx;
				font-size: 25rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 600;
				color: #666666;
				line-height: 26rpx;
				background-color: #F8AD22;
				color: #ffffff;
				border-radius: 10rpx;
				margin-right: 10rpx;
			}

			.title {
				font-size: 35rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #333333;
				line-height: 33rpx;
			}

			.desc {
				font-size: 30rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #666666;
				line-height: 26rpx;
			}

			.advantage {
				display: flex;

				.advantageitem {
					margin-right: 8rpx;
					// width: 80rpx;
					// height: 40rpx;
					background: #FFF5E1;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					font-size: 23rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #F06703;
					line-height: 23rpx;
					text-align: center;
					line-height: 40rpx;
					padding: 10rpx 15rpx;
					box-sizing: border-box;
				}
			}

			.priceandcollect {
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.price {
					font-size: 35rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
					color: #F23A00;
					line-height: 35rpx;
				}

				.collect {
					font-size: 22rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #F8AD22;
					line-height: 26rpx;
				}
			}

		}


		.basicInformation {
			width: 100%;
			padding: 30rpx;
			background-color: #ffffff;
			margin-top: 20rpx;
			box-sizing: border-box;

			.title {
				font-size: 28rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #333333;
				line-height: 33rpx;
			}

			.informationBox {
				width: 100%;
				margin-top: 30rpx;
				display: flex;
				flex-wrap: wrap;
				// justify-content: space-between;

				.informationItem {
					width: 156rpx;
					// padding: 0 20rpx;
					height: 74rpx;
					background: #F7F8FA;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					text-align: center;
					line-height: 74rpx;
					margin-bottom: 20rpx;
					margin-right: 22rpx;
					font-size: 24rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;
				}

				.informationItem:nth-child(4n) {
					margin-right: 0rpx;
				}
			}

			.basicBox {
				width: 100%;
				padding: 30rpx;
				box-sizing: border-box;
				background-color: #FFF8EC;
				border-radius: 20rpx 20rpx 20rpx 20rpx;

				.basicitem {
					.title {
						font-size: 26rpx;
						font-family: PingFang SC-Bold, PingFang SC;
						font-weight: bold;
						color: #333333;
						line-height: 33rpx;
					}

					.desc {
						font-size: 24rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #666666;
						line-height: 44rpx;
					}
				}

			}
		}



		.facilityBox {
			width: 100%;
			padding: 30rpx;
			box-sizing: border-box;
			background-color: #ffffff;
			margin-top: 20rpx;


			.facilityitemBox {
				display: flex;
				flex-wrap: wrap;
				// justify-content: space-between;
				margin-top: 30rpx;

				.facilityitem {
					width: 120rpx;
					height: 130rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					align-items: center;
					margin-right: 19rpx;
					margin-bottom: 30rpx;

					.desc {
						font-size: 24rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #333333;
						line-height: 28rpx;
					}
				}
			}

		}

		.otherBox {
			width: 100%;
			padding: 30rpx;
			box-sizing: border-box;
			background-color: #ffffff;
			margin-top: 20rpx;

			.otherDesc {
				margin-top: 20rpx;

				.otherDescitem {
					font-size: 24rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #666666;
					line-height: 44rpx;
				}
			}
		}


		.position {
			width: 100%;
			padding: 30rpx;
			box-sizing: border-box;
			background-color: #ffffff;
			margin-top: 20rpx;

			.positiondesc {
				width: 100%;
				font-size: 24rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #666666;
				line-height: 44rpx;
				margin-top: 20rpx;
			}

			.positionBox {
				margin-top: 20rpx;
				position: relative;

				.overlay {
					width: 690rpx;
					height: 360rpx;
					// background: rgba(0, 0, 0, 0.85);
					border-radius: 10rpx 10rpx 10rpx 10rpx;
					position: absolute;
					top: 0;
					text-align: center;
					line-height: 380rpx;
				}
			}





		}


		.instructions {
			width: 100%;
			padding: 30rpx;
			box-sizing: border-box;
			background-color: #ffffff;
			margin-top: 20rpx;

			.instructionsdesc {
				font-size: 24rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #666666;
				line-height: 44rpx;
				margin-top: 20rpx;
			}
		}

		.box_phone_yes {
			background-color: transparent;
			border: none;
			width: 100%;
			padding: 0;
			text-align: left;
		}

		.box_phone_yes:after {
			border: none;
		}

		.bottomContent {
			width: 100%;
			background: #FFFFFF;
			position: fixed;
			bottom: 0;
			padding: 16rpx 30rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-bottom: constant(safe-area-inset-bottom);
			/* 兼容 iOS 设备 */
			padding-bottom: env(safe-area-inset-bottom);

			/* 兼容 iPhone X 及以上设备 */
			.itemBox {
				width: 280rpx;
				display: flex;
				// justify-content: space-between;

				.item {
					width: 80rpx;
					height: 75rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: space-between;
					margin-right: 20rpx;

					.text {
						font-size: 20rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #666666;
						line-height: 23rpx;
					}

				}

				.item:nth-child(3) {
					margin-right: 0rpx;
				}


			}

			.btns {
				width: 360rpx;
				height: 88rpx;
				background: #F8AD22;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				font-size: 30rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
				line-height: 35rpx;
				text-align: center;
				line-height: 88rpx;
			}
		}
	}
</style>